import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import PersonStore from '../store/Person';
import Person from '../containers/Person';



const { Header, Content, Footer, Sider } = Layout;

class user extends Component {
    constructor(props){
        super(props)
        this.state = {
            pathname: props.history.location.pathname,
            urlList: [],
            age:1
        }
    }
    UNSAFE_componentWillMount(){
        const pathname = this.props.history.location.pathname
        this.setState({
            urlList: pathname.split('/')
        })
        console.log(pathname.split('/'));
        
        if (pathname === '/user/tom') {
            console.log('haha'); 
            return <div>你好我是tom</div>
        } else {
            console.log('bill');
            return <div>你好我是Bill</div>
        }
    }
    dj = () => {
        console.log('hahah');
        
        return <div>我是废物</div>
    }
    dianji(){
        console.log(PersonStore)
        PersonStore.setName("张三")
        alert("你好")
    }
    render() {
        // console.log(this.props);
        const {pathname, urlList} = this.state
        console.log(pathname);
        console.log(urlList);
        
        
        return (
               <div>
                 <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }} />
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>{urlList[1]}</Breadcrumb.Item>
                        <Breadcrumb.Item>{urlList[2]}</Breadcrumb.Item>
                        </Breadcrumb>
                        {urlList[2] === 'tom' ?
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        Tom is a Tom.{PersonStore.name}
                        <button onClick={this.dianji}>点击</button>
                        </div> : <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        Tom is a Bill.
                        </div>
                        }
                        
                    </Content>
                    <button onClick={() => {
                        this.setState({age:this.age+1})
                    }}>点击</button>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                    <Person/>
                </Layout>  
                <Person/>
               </div>   
           
        )
    }
}

export default user
